<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
	<pre>
	<!-- 1、组件名称如果是驼峰写法，如果在页面中需要要全部转成小写，而且要用中划线进行连接 -->
	<!-- 2、如果组件在模板字符串中，不需要转成小写形式 -->
	</pre>
	<div id="app">
		<!-- <hello-world></hello-world> -->
		<component-a></component-a>
		<!-- <component-b></component-b> -->
    </div>

	
    <script>
		var ComponentA={
			data:function(){
				return{
					name:'JERRY'
				}
			},template:`
			<div>
			<p>{{name}}</p>
			
			</div>
			`
		}
        var vm = new Vue({
            el: '#app'
            ,data: {
			},components:{
				'component-a':ComponentA,
				<!-- 'component-b':ComponentB -->
			}
			
        })
		
	</script>
</body>

</html>